<template>
  <div class="add-word-panel" @click.self="closePanel">
    <div class="panel">
      <header>添加词语</header>
      <div class="rule">
        说明：在下面文本框中输入多行文本，表示添加多个词语，每个词语的属性用斜杆号/隔开<br>
        (1)词语<br>
        (2)难易程度[1-5]：1非常简单/2简单/3适中/4困难/5非常困难，默认为3<br>
        (3)适合年龄段[0-2]：0全部/1年轻人/2中老年人，默认为0<br>
        (4)是否是成语[0-1]：0非成语/1成语，默认为0<br>
        (5)分类：选填项，只能填一个分类【常见分类：动物/人物/食物/物品/地点/娱乐/动作/名称/成语】<br>
        (6)标签：选填项，多个标签用逗号隔开<br>
      </div>
      <div class="exmaple">
        示例：<br>
        熊猫/1/0/0/动物/动物<br>
        李现/3/1/0/人物/明星，娱乐，演员<br>
        生龙活虎/3/0/1/成语/动物，形容词<br>
      </div>
      <div class="tip">词语/难易1-5/年龄段0-2/成语0-1/分类/标签</div>
      <textarea v-model="words"></textarea>
      <div class="row add-btn">
        <el-button type="primary" @click="addWord">确认添加</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import api from '../api'

export default {
  name: 'WordForm',
  data() {
    return {
      words: '',
      key: ['title', 'hard', 'applyAge', 'isIdiom', 'type', 'tag']
    }
  },
  methods: {
    closePanel() {
      this.$emit('close')
    },
    createWords(words) {
      // console.log(words)
      api.word.create({ words: words}).then(res => {
        if(res) {
          alert('添加成功')
          this.words = ''
        }
      })
    },
    addWord() {
      let wordList = []
      let arr = this.words.split('\n')
      for(let i=0,len=arr.length;i<len;i++) {
        let objArr = arr[i].split('/')
        let obj = {}
        for(let j=0;j<objArr.length;j++) {
          obj[this.key[j]] = objArr[j]
        }
        wordList.push(obj)
      }
      this.createWords(wordList)
    }
  }
}
</script>

<style>
  .add-word-panel {
    z-index: 3;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .panel {
    background: #fff;
    width: 700px;
    height: 730px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
  }
  .panel header {
    color: #606266;
    border-bottom: 1px solid #dcdfe6;
    height: 48px;
    line-height: 48px;
    text-align: center;
  }
  .exmaple {
    margin: 0 0 12px 12px;
  }
  .tip {
    margin-top: 12px;
    margin-left: 12px;
    color: gray;
  }
  textarea {
    margin: 0 12px 12px 12px;
    padding: 12px;
    width: 100%;
    width: 670px;
    height: 280px;
    box-sizing: border-box;
  }
  .add-btn {
    justify-content: center;
    margin-top: 10px;
  }
</style>